<template>
  <div class="containerFlie">
    <uv-text text="上传附件" @click="choose" type="primary"></uv-text>
    <view v-if="list.length">
      <view class="box flex justifyBetween alignCenter" v-for="(item, index) in list" :key="index">
        <uv-link :underLine="true" :href="item.path" :text="name_format(item.name)" color="#458CC1"></uv-link>
        <view style="margin-left: 20px;color: #E84635;" class="fz12" @click="list.splice(index, 1)">
          删除
        </view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import auth from "@/utils/auth.js";
import useCounterStore from "@/stores/counter";
const { proxy } = getCurrentInstance();
const counter = useCounterStore();
let props = defineProps(["modelValue", "valType", "color"]);
const emit = defineEmits(["update:modelValue"]);

let list = ref([]);

let color = computed(() => {
  return props.color;
});

async function choose() {
  let index = await proxy.$auth.showActionSheet(["照片", "附件"]);
  switch (index) {
    case 0: //上传图片
      chooseImage();
      break;
    case 1: //上传附件
      chooseFile();
      break;
    default:
      break;
  }
}

function name_format(name) {
  if (name.includes("http")) {
    return proxy.$utils.substringFn(name);
  } else {
    return name;
  }
}

async function chooseImage() {
  let resp = await auth.chooseImage(9);
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    let url = await counter.uploadLafFile(element);
    list.value.push({ name: url, path: url });
  }
}

async function chooseFile() {
  let resp = await auth.chooseFile(9);
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    list.value.push({
      name: element.name,
      path: await counter.uploadLafFile(element.path),
    });
  }
}

//判断变量的数据类型
function isJsonArray(value) {
  if (Array.isArray(value)) {
    try {
      // 尝试将数组转换为JSON字符串
      JSON.stringify(value);
      // 如果转换没有错误，它是一个JSON数组
      return "jsonArr";
    } catch (e) {
      // 如果转换抛出错误，它不是一个JSON数组
      return "arr";
    }
  } else {
    // 如果不是数组，它肯定不是JSON数组
    return "string";
  }
}

// 当值发生变化，更新值
watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) {
      let aa = isJsonArray(newValue);
      if (aa == "jsonArr") {
        list.value = [...newValue];
      } else {
        let arr = [];
        if (aa == "string") {
          arr = newValue.split(",");
        } else {
          arr = [...newValue];
        }
        let list2 = [];
        arr.forEach((element) => {
          list2.push({
            name: element,
            path: element,
          });
        });
        list.value = [...list2];
      }
    }
  },
  { immediate: true, deep: true }
);

watch(
  () => list.value,
  (newValue, oldValue) => {
    let a = proxy.$utils.arraysAreEqual(newValue, props.modelValue || []);
    if (!a) emit("update:modelValue", newValue);
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.containerFlie {
  width: 100%;
}
.box {
  margin-top: 10px;
}
</style>



